<template>
  <!-- 大家都在说 -->
  <div class="banner-box">
    <div class="main">
      <div class="main-head">
        <h3>大家都在说</h3>
        <span>生活，没有统一标准</span>
      </div>

      <!-- 轮播图 -->
      <div class="swiper-container feedback-swiper" id="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in 30" :key="item">
            <!-- 一个新品展示 -->
            <div class="show-new">
              <div class="show-img">
                <img
                  src="https://yanxuan-item.nosdn.127.net/bde4e38b9fbc8d6e128daefeaab41828.jpg?type=webp&imageView&quality=95&thumbnail=355x355"
                />
              </div>
              <div class="describe">
                <span>懒****喵 2022-07-25 12:54</span>
                <p>淘气白日梦 眼影刷四支...<span>￥39</span></p>
                <span>吸油挺好的</span>
              </div>
            </div>
            <!--  -->
          </div>
        </div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  name: "Feedback",
  data() {
    return {};
  },

  mounted() {
    new Swiper(".feedback-swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: {
        delay: 1500,

        disableOnInteraction: false,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      slidesPerView: 3,
      spaceBetween: 10,
      speed: 500,
    });
  },
};
</script>

<style lang="less" scoped>
//底部轮播图
.banner-box {
  max-width: 100%;
  min-width: 1090px;
  background-color: #f4f0ea;
  padding: 60px 0;

  .main {
    width: 1090px;
    margin: 0 auto;

    .main-head {
      padding-bottom: 20px;
      h3 {
        font-size: 28px;
        display: inline-block;
      }

      span {
        font-size: 14px;
        margin-left: 20px;
      }
    }

    //一个新品
    .show-new {
      width: 355px;
      height: 492px;
      background-color: #fff;
      position: relative;

      &:hover img {
        // background-color: #f4f0ea;

        transform: scale(1.1);
      }

      //新品图片
      .show-img {
        width: 355px;
        height: 355px;
        position: absolute;
        overflow: hidden;
        cursor: pointer;
        // background-color: #f4f4f4;

        img {
          transition-property: all;
          transition-duration: 1s;
        }
      }

      //新品描述
      .describe {
        height: 145px;
        width: 315px;
        background-color: #fff;
        margin: 0 auto;
        padding: 20px 15px;
        z-index: 99999;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        p {
          font-size: 16px;
          font-weight: bold;
          margin: 5px 0 16px 0;
          position: relative;

          span {
            position: absolute;
            display: inline;
            color: #b4a078;
            font-size: 13px;
            font-weight: 350;
            right: 20px;
          }
        }

        span:first-child {
          color: #999;
        }

        span:last-child {
          color: #333;
        }
      }
    }
  }
}
</style>
